<template>
  <div>
    <el-table
    :data="productList"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="productId"
      label="商品编号"
      align="center"
      width="80">
    </el-table-column>
    <el-table-column
      prop="productName"
       align="center"
      label="商品名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="soldNum"
      label="累计销量"
       align="center"
      width="80">
    </el-table-column>
    <el-table-column
      prop="productStatus"
       align="center"
      label="商品状态"
      width="80">
    </el-table-column>
    <el-table-column
       align="center"
      label="评论管理"
      width="100">
    </el-table-column>
    <el-table-column
       align="center"
      label="规格管理"
      width="100">
    </el-table-column>
    <el-table-column
       align="center"
      label="参数管理"
      width="100">
    </el-table-column>
    <el-table-column
       align="center"
      label="图片管理"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="商品评论"
      width="100"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
       align="center"
      width="120">
    </el-table-column>
    <el-table-column
      prop="updateTime"
       align="center"
      label="修改时间"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
       align="center"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5,10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
  </div>
   
</template>

<script>
import { getList } from '@/api/product';
export default {
  data(){
    return{
      productList:[],
      pageNum:1,
      pageSize:5,
      total:0
    }
  },
    methods:{
    // 改变页数
      handleSizeChange(val) {
        this.getProduct(this.pageNum,val)
      },
      //改变页码
      handleCurrentChange(val) {
        this.getProduct(val,this.pageSize)
      },
        getProduct:function(pageNum,pageSize){
            // getList()只是发送请求 .then之后才是拿到回调结果
            if(pageNum==0 || pageSize==0){
              pageNum=this.pageNum;
              pageSize=this.pageSize;
            }
            getList(pageNum,pageSize).then(response=>{
                // console.log(response);
                this.productList = response.data.records;
                this.pageNum = response.data.current,
                this.pageSize = response.data.size,
                this.total = response.data.total
            })
        }
    },
    //页面加载之后就加载商品数据进行渲染
    mounted(){
        this.getProduct(this.pageNum,this.pageSize);
    }
}
</script>

<style>

</style>